<template>
  <div class="user-register">
    <!--    用户管理-注册用户-->
    <BasicTable @register="registerTable">
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              label: '指定推荐人',
              onClick: handleAppoint.bind(null, record),
            },
          ]"
        />
      </template>
    </BasicTable>

    <AppointModal @register="registerModal" @success="handleSuccess" />
  </div>
</template>

<script setup lang="ts">
  import AppointModal from './modal.vue';
  import mcApi from 'mc-c2b2m-operator-api';
  import { useModal } from '@/components/Modal';
  import { tableColumns, tableFormSchema } from './data';
  import { useTableAction } from '@/hooks/web/useTableAction';
  import { BasicTable, TableAction, useTable } from '@/components/Table';


  const { SystemModule } = mcApi;
  const { UserApi } = SystemModule;
  const { getActionColumn, handleFetchDateParams } = useTableAction();

  const [registerTable, { reload }] = useTable({
    striped: false,
    bordered: false,
    canResize: false,
    useSearchForm: true,
    columns: tableColumns,
    showIndexColumn: false,
    showTableSetting: false,
    api: UserApi.getUserPage,
    actionColumn: getActionColumn(),
    beforeFetch: (arg) => handleFetchDateParams(arg),
    formConfig: {
      labelWidth: 120,
      schemas: tableFormSchema,
    },
  });

  const [registerModal, { openModal, closeModal }] = useModal();

  // 指定推荐人
  function handleAppoint(record: any) {
    openModal(true, { record });
  }
  function handleSuccess() {
    closeModal();
    reload();
  }
</script>

<style scoped lang="scss">
  :deep(.ant-table-thead > tr > th) {
    background: #fff;
  }
</style>
